
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row">
            <div class="layui-form" style="float:right;margin-top: 10px">
              <div class="layui-form-item" style="margin:0;">
                <div id="timeDiv" class="layui-form-item" style="margin:0;">
                  <div class="layui-input-inline">
                    <input type="text" name="searchSmid" id="searchSmid" placeholder="商户编号" autocomplete="off" class="layui-input">
                  </div>
                  <a id="searchData" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i>搜索</a>
                </div>
              </div>
            </div>
          </div>
          <table style="margin-top: 10px" id="XxPay_Mgr_Merchant_Chart" lay-filter="XxPay_Mgr_Merchant_Chart"></table>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  layui.use(['admin', 'table', 'util', 'timePick'], function(){
    var $ = layui.$
            ,admin = layui.admin
            ,table = layui.table
            ,element = layui.element
            ,form = layui.form
            ,view = layui.view
            ,timePick = layui.timePick;

    timePick.init();  //第一个参数表示开始时间   第二个表示结束时间   0,0今天   -1,-1昨天   -7,0近一周   以此类推
    element.render('breadcrumb', 'breadcrumb');
    var passageTemplateId = view.getOpenParams('passageTemplateId');   // 当前子账户ID
    var createTimeStart = $('#createTimeStart').val();
    var createTimeEnd = $('#createTimeEnd').val();
    var loading = layer.msg('加载中', {icon: 16, shade: 0.01});

      templet: '<div>{{ d.suRate * 100 }}%</div>'
      var suRate = function(d){
          var suRate = d.suRate * 100;
          return suRate.toFixed(2)+"%";
      };
    //商户列表
    table.render({
      elem: '#XxPay_Mgr_Merchant_Chart'
      ,url: layui.setter.baseUrl + '/config/pay_alizft_mchInfo/count' //列表接口
      ,where: {
          access_token: layui.data(layui.setter.tableName).access_token,
          passageTemplateId: passageTemplateId,
          createTimeStart: createTimeStart,
          createTimeEnd: createTimeEnd
      }
      ,id: 'reloadData'
      ,page: true
      ,cols: [[
        {field: 'smid', title: '商户编号'}
        ,{field: 'name', title: '商户名称'}
        ,{field: 'suAmount', title: '成功金额'}
        ,{field: 'allAmount', title: '总金额'}
        ,{field: 'suCount', title: '成功笔数'}
        ,{field: 'allCount', title: '总笔数'}
        ,{field: 'suRate', title: '成功率', templet: suRate}
      ]]
        ,skin: 'line'
        ,done: function () {
            layer.close(loading);
        }
    });


    // 搜索
    var $ = layui.$, active = {
        reload: function(){
        var loading = layer.msg('加载中', {icon: 16, shade: 0.01});
        var smid = $('#searchSmid').val();
        var createTimeStart = $('#createTimeStart').val();
        var createTimeEnd = $('#createTimeEnd').val();
        //执行重载
        table.reload('reloadData', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
          ,where: {
              smid: smid,
              createTimeStart: createTimeStart,
              createTimeEnd: createTimeEnd
          },done: function () {
                layer.close(loading)
            }
        });
      }
    };

    $('#searchData').on('click', function() {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    // 渲染表单
    form.render();
  });
</script>
